{extend name="public/base"/}
{block name="style"}
  <link rel="stylesheet" href="/public/lboyue/m/css/loading.css">
<script type="text/javascript" src="/public/lboyue/m/sitejs/book.js?v=20181123"></script>
<script type="text/javascript">

    $(document).ready(function () {


        $('.moreIco').click(function () {

            if($(this).hasClass('closeIco')){

                $('#header').removeClass('app_headerFixed2');
                $(this).removeClass('closeIco');
                $('.app_header_second').hide();
                $('.app_meskSection').hide();

            }else{

                $('#header').addClass('app_headerFixed2');
                $(this).addClass('closeIco');
                $('.app_header_second').show();
                $('.app_meskSection').show();
            }



        })

        $('body').on('click','.app_meskSection',function () {
            $('.app_header_second').hide();
            $('.app_meskSection').hide();
            $('#header').removeClass('app_headerFixed2');
            $('.moreIco').removeClass('closeIco');
        })
    })

</script>
{/block}
{block name="body"}

<div class="app_goBackToTop"></div>
<div class="app_meskSection"></div>

<div class="container">

    <div class="app_header_section2  app_scrollerHeader" id="header">
        <div class="app_header_detail2">
            <div class="app_header_back"></div>
            <div class="app_header_h1">
                我要打赏                <a href="/personal/bookcase"> <i class="shujiaIco"></i></a>
                <i class="moreIco"></i>
            </div>
        </div>
			{include file="public/dropnav" /}
	</div>



    <div class="app_body">
        
    <div class="app_userComment">

        <div class="app_listBlock_title tit_icon1">
            <span class="h1">此书超赞，只差小主您的打赏了</span>
        </div>

        <div class="app_liwuList" id="radioList">
            <ul>
				{volist name="bonusconfig" id="vo"}
                <li message="{$vo.desc}" giftid="{$key}" giftprice="{$vo.price}" giftname="{$vo.name}">
                        <i class="radio "></i>
                        <span class="lipinImg">
                            <img src="{$vo.imgfile}" ></span>
                        <span class="lipinName">
                            {$vo.caption}                        </span>
                        <span class="lipinName">
                             <i>{$vo.price}</i> 书币/艘     </span>
                </li>
				{/volist}
				</ul>

            <!-- 选中礼物编号 -->
			<input type="hidden" id="giftname" value="{$bonusconfig[$bonusid]['name']}">
            <input type="hidden" id="giftid" value="{$bonusid}">
			<input type="hidden" id="giftprice" value="{$bonusconfig[$bonusid]['price']}">
        </div>

        <div class="app_liwuNumber">
            <div class="app_liwuNumber_left">数量：</div>
            <div class="app_liwuNumber_right">
                <span class="reduce" id="reduce">-</span>
                <span class="num"><input type="number" id="sendgiftnumber" value="1" min="1" onblur="checkInput()"/></span>
                <span class="add" id="add">+</span>
            </div>
        </div>

        <div class="app_zengyan">
            <div class="app_zengyan_left">赠言：</div>
            <div class="app_zengyan_right">
                <textarea name="" id="sendwords" cols="30" rows="10" class="" placeholder="">支持作者文风醇醪，多更多福气。顺风顺水小帆船奉上，祝大大早日立地成神！~</textarea>
            </div>

        </div>

        <button class="app_comment_button" onclick="subsendgiftdata()">打赏作者</button>
    </div>


    <div class="app_comment">
        <div class="app_listBlock_title tit_icon1">
            <span class="h1">本书全部打赏<i>（{$totalbonus}）</i></span>
        </div>

        <div class="app_comment_list">
            <ul id="sendgiftdatas">
			<!---
				{volist name="bonus" id="vo"}
                <li>
                        <span class="userHeader"><a href="javascript:void(0)"><img src="{$vo.avatar}" /></a></span>
                        <div class="contentList">
                            <div class="userName">
                                <span class="public_addPositionRelative  userWidth">
                                    <span class="public_AddFloatLeft">{$vo.username}</span>
                                    <span class="public_AddFloatLeft">
                                        <i class="public_AddFloatLeft"><img src="{$vo.ico}" alt="" width="30"/></i>
                                        <em class="public_AddFloatLeft">{$vo.actname}</em>
                                        <o class="public_AddFloatLeft">×{$vo.num}</o>
                                    </span>
                                </span>
                            </div>
                            <div class="userContent">{$vo.desc}</div>
                        </div>
                    </li>
				{/volist}	
				--->
				</ul>
        </div>


       
        <div class="app_reload" style="display: none">
            <span class="loader-section">
                <div class="loader-sectionContainer">
                    <div class="sk-fading-circle">
                        <div class="sk-circle1 sk-circle"></div>
                        <div class="sk-circle2 sk-circle"></div>
                        <div class="sk-circle3 sk-circle"></div>
                        <div class="sk-circle4 sk-circle"></div>
                        <div class="sk-circle5 sk-circle"></div>
                        <div class="sk-circle6 sk-circle"></div>
                        <div class="sk-circle7 sk-circle"></div>
                        <div class="sk-circle8 sk-circle"></div>
                        <div class="sk-circle9 sk-circle"></div>
                        <div class="sk-circle10 sk-circle"></div>
                        <div class="sk-circle11 sk-circle"></div>
                        <div class="sk-circle12 sk-circle"></div>
                    </div>
                </div>
                <div class="loader-sectionTips">正在加载更多</div>
            </span>
        </div>
        <div class="app_noData" style="display: none"><span class="noData">没有更多数据了</span></div>

    </div>
    {block name="include"}{include file="public:footer" /}{/block}
</div>
{/block}
{block name="script"}
   <script type="text/javascript">
		var jumpurl = "{$jumpurl}";
        $(document).ready(function () {

            $('#radioList').on('click','li', function () {
                // 设置赠言
                $("#sendwords").val($(this).attr("message"));
                // 记录选中礼物编号
                $("#giftid").val($(this).attr("giftid"));
				$("#giftprice").val($(this).attr("giftprice"));
				$("#giftname").val($(this).attr("giftname"));
                if($(this).find('.radio').hasClass('active')){

                    $(this).find('.radio').removeClass('active');
                }else{
                    $(this).parent().parent().find('.radio').removeClass('active');
                    $(this).find('.radio').addClass('active');
                }
                checkActive();
            });


            // 选中书籍详情页面选中的礼物
            var giftid = "{$bonusid}";
            var newgiftid = parseInt(giftid);
            $("#radioList li:eq("+newgiftid+") .radio").addClass("active");
            $("#sendwords").val($("#radioList li:eq("+newgiftid+")").attr("message"));

            checkActive();

            $('#reduce').click(function () {
                var val = parseInt($(this).next().find('input').val());
                if(val<=1){
                    malert("礼物个数不能再少了哦");
                    val  = 1;
                }else{
                    val--;
                }
                $(this).next().find('input').val(val);
            });


            $('#add').click(function () {
                var val = parseInt($(this).prev().find('input').val());
                if(val >= 9999){
                    val  = 9999;
                }else{
                    val++;
                }
                $(this).prev().find('input').val(val);
            })




        })



        // 检测当前有无选中礼物
        function checkActive() {
            var isactive = 0;
            $("#radioList li").each(function () {
                if ($(this).find(".radio").hasClass("active")) {
                    isactive = 1;
                }
            });

            if (isactive == 0) {
                $("#radioList li:eq(0) .radio").addClass("active");
                $("#sendwords").val($("#radioList li:eq(0)").attr("message"));
            }
        }


        function subsendgiftdata() {
			var articleid = {$bookid};
            var giftid = $("#giftid").val();
			var giftprice = $("#giftprice").val();
			var giftname = $("#giftname").val();
			
			var sendgiftnumber = parseInt($("#sendgiftnumber").val());
            var sendwords = $("#sendwords").val();
            
            if (isnullorempty(giftid))
            {
                malert("参数丢失，无法赠送礼物");
                return "";
            }

            if (isnullorempty(sendgiftnumber) || sendgiftnumber == 0)
            {
                malert("请选择赠送礼物数量");
                return "";
            }

            if (isnullorempty(sendwords))
            {
                malert("赠言不能为空哦");
                return "";
            }

			var actvalue  = giftprice*sendgiftnumber;
			
            $.ajax({
                url      : "/book/bookbonus",
                type     : "POST",
                dataType : "json",
                data     : {
					"articleid":articleid,
                    "giftid":giftid,
					"actvalue":actvalue,
					"actname":giftname,
                },
                success  : function (re) {
                    console.log(re);
                    var code = re.code;
                    switch (code)
                    {
                        case 1:
							var url  = jumpurl;
                            malert(re.msg, 1200, 1);
                            setTimeout(function () {
								window.location.href=url;
                            }, 1200);
                            break;
                        case 2:
							var url  = "/login.html?backurl="+encodeURIComponent(window.location.href);
                            malert(re.msg, 1200, 4);
							setTimeout(function () {
								window.location.href=url;
                            }, 1200);
                            break;
						case 3:
							var url  = "/pay/index";
                            malert(re.msg, 1200, 4);
							setTimeout(function () {
								window.location.href=url;
                            }, 1200);
                            break;
                        default:
                            malert(re.msg, 1200, 2);
                            break;
                    }
                },
                error    : function () {
                    malert("服务器开小差了～", 1200, 2);
                    return "";
                }
            });
			
        }

        var moreloading = "1";
        var pageindex = 1;
        var pagesize = "10";
        var moredata = true;
        // 获取更多赠送礼物数据
        function loadMore() {

            //if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
			var nWinH =  document.documentElement.clientHeight;
			var nScrollTop = (document.body.scrollTop || document.documentElement.scrollTop) + nWinH;
			var nBodyScrollH = document.body.scrollHeight;
			if(nBodyScrollH - nScrollTop < 240){
                if (moreloading == "0")
                {
                    return "";
                }

                if (!moredata) {
                    $(".app_noData").show();
                    return "";
                }


                // 开启提示
                $(".app_reload").show();

                $.ajax({
                    url      : "/api/bonus/getmore",
                    type     : "POST",
                    dataType : "json",
                    data     : {
                        "bookid" : "{$bookid}",
                        "page" : pageindex,
                    },
                    success  : function (re) {
                        var code = re.code;
                        // 关闭提示
                        $(".app_reload").hide();
                        switch (code)
                        {
                            case 1:
                                var data = re.data;
                                var html = "";
                                if (data.length ==0) {
                                    moredata = false;
                                }
                                for (var i = 0; i < data.length ; i++)
                                {

                                    html +=  ' <li>';
                                    html +=  ' <span class="userHeader"><a href="javascript:void(0)"><img src="'+data[i].avatar+'" /></a></span>';
                                    html +=  ' <div class="contentList">';
                                    html +=  ' <div class="userName">' +
                                        '<span class="public_addPositionRelative userWidth">' +
                                        '<span class="public_AddFloatLeft">'+data[i].username+'</span>' +
                                        '<span class="public_AddFloatLeft">' +
                                        '<i class="public_AddFloatLeft">' +
                                        '<img src="'+data[i].ico+'" width="30">' +
                                        '</i>' +
                                        '<em class="public_AddFloatLeft">'+data[i].actname+'</em>' +
                                        '<o class="public_AddFloatLeft">×'+data[i].num+'</o>' +
                                        '</span>' +
                                        '</span>' +
                                        '</div>';
                                    html +=  ' <div class="userContent">'+data[i].desc+'</div>';
                                    html +=  '</div>';
                                    html +=  '</li>';
                                }
								pageindex = pageindex+1;
                                $("#sendgiftdatas").append(html);
                                break;
                            case 999:
                                moredata = false;
                                $(".app_noData").show();
                                break;
                            default:
                                malert(re.msg, 1200);
                                break;
                        }
                    },
                    error    : function () {
                        //malert(re.msg, 1200);
						moredata = false;
						$(".app_reload").hide();
                        $(".app_noData").show();
                        return "";
                    }
                });

            }
        }
    

        $(document).ready(function () {

            $(window).scroll(function () {
                loadMore();
            });

            document.addEventListener('touchstart',function () {
                loadMore();
            },false);

            document.addEventListener('touchmove',function () {
                loadMore();
            },false);

            document.addEventListener('touchend',function () {
                loadMore();
            },false);

        });

        // 检测Input 输入框
        function checkInput() {
            var sendgiftnumber = $("#sendgiftnumber").val();
            if (checknumber(sendgiftnumber))
            {
                $("#sendgiftnumber").val(1);
            }

            if (sendgiftnumber < 1) {
                $("#sendgiftnumber").val(1);
            }

            if (sendgiftnumber > 999) {
                $("#sendgiftnumber").val(999);
            }
        }
    </script>
{/block}


